<template>
	<view class="content">
		<!-- 警告 -->
		<view class="gonggao" v-if="changuanxinxi.gonggao">
			<uni-notice-bar class="item" show-icon scrollable :text="changuanxinxi.gonggao" />
		</view>
		<!-- 顶部栏背景图 -->
		<view class="top-box">

			<swiper class="swiper" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,i) in changuanxinxi.about_photo_list" :key="i">
					<image class="top-backimg" :src="base64Img(item.image)" />
				</swiper-item>
			</swiper>

		</view>
		<view class="content-box">
			<view class="shangjia-box">
				<view class="title">
					{{changuanxinxi.name}}
				</view>
				<!-- 简介 -->
				<view class="message-box">
					{{changuanxinxi.pacific_coliseum}}
				</view>
				<!-- 详情/设施 -->
				<view class="xiangqing-box">
					<view class="">

					</view>
					<view class="" @click="gotoXiangqingView(changuanxinxi.id,changuanxinxi.name)">
						详情/设施 >
					</view>
				</view>
				<!-- 地址 -->
				<view class="dizhi-box" v-if="changuanxinxi.province">
					<view class="right-box">
						{{changuanxinxi.province + ' ' + changuanxinxi.city + ' ' + changuanxinxi.counties}}
					</view>

				</view>

				<!-- 警告 -->
				<view class="warring">
					温馨提示:具体场地球馆可能会根据实际情况调整
				</view>
			</view>

			<view class="zudui-box">
				<view class="changguan-box" @click="gotoZuduiView()" v-if="changuanxinxi.you_changguanfang_zudui">
					有场馆方组队，点击查看
				</view>
				<uni-notice-bar v-if="yaoyueList[0]" @click="gotoYaoYue()" scrollable  class="item"	background-color="#EAF2FF" color="#2979FF" :text="yaoyueListTitle" />
				<uni-notice-bar  v-if="!yaoyueList[0]" @click="gotoYaoYue()"  class="item"	background-color="#EAF2FF" color="#2979FF" :text="yaoyue2" />

			</view>
			<!-- 场地选择 -->
			<view class="changdi-content">
				<view class="changdi-box">
					<view class="check-title-box">
						<view class="btn">
							羽毛球
						</view>
					</view>
					<view class="btn-box" @click="gotoItem()">
						开始预约
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue"

	import {
		onShow,
		onPageScroll,
		onReachBottom,
		onPullDownRefresh,
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import Header from '@/component/topBar.vue';
	import {
		getChangdiList,
		getFreeTime,
		getOpenId
	} from '../../api/api.js'

	let scrollView = reactive({
		indicatorDots: true,
		autoplay: true,
		interval: 2000,
		duration: 500
	})

	import {
		base64Img
	} from '../../tools/tools.js'

	const yaoyue = ref('有新的邀约,点击查看！')
	const yaoyue2 = ref('暂时没有邀约呢，要不去创建一个吧')
	const date = ref('')
	const startTime = ref('9:00')
	const endTime = ref('12:00')
	const changdiList = ref([])
	const changuanxinxi = ref([])
	const yaoyueList = ref([])
	const yaoyueListTitle = ref('')
	const safeAreaInsets = uni.getSystemInfoSync()
	const allimages = ref([])
	const id = ref('')
	
	// 日期点击事件
	const bindDateChange = (e) => {
		date.value = e.detail.value;
	}
	// 开始时间选择
	const bindStartTimeChange = (e) => {
		startTime.value = e.detail.value
	}
	// 结束时间选择
	const bindEndTimeChange = (e) => {
		endTime.value = e.detail.value
	}
	// 图片放大
	const clickBigImg = (index, alldata) => {
		console.log(index, alldata);
		let imgs = []
		for (let i = 0; i < alldata.length; i++) {
			imgs.push(base64Img(alldata[i].image))
		}

		uni.previewImage({
			urls: [imgs],
			current: index,
			success: () => {
				console.log('Preview success');
			},
			fail: (err) => {
				console.error('Preview failed', err);
			},
		});
	}


	// 获取场地列表 无搜索
	const _getuseropenid = (id) => {
		uni.login({
			provider: 'weixin', //使用微信登录
			onlyAuthorize: true,
			success: function(res1) {

				getOpenId(res1.code).then((res2) => {
					getChangdiList(id, res2.open_id).then((res3) => {
						changuanxinxi.value = res3.chang_guan
						changdiList.value = res3.values
						yaoyueList.value = res3.zhaomu_list
						for (var i = 0; i < res3.zhaomu_list.length; i++) {
							yaoyueListTitle.value = yaoyueListTitle.value + ' ' + res3.zhaomu_list[i]
						}
						setTimeout(() => {
							uni.hideLoading();
						}, 5000)
						console.log(res3);
					})
				})
			}
		});
	}

	// 获取空闲时间
	const __getFreeTime = (day, startTime, endTime, id) => {
		console.log('空闲时间', day, startTime, endTime, id);
		getFreeTime(day, startTime, endTime, id).then((res) => {
			console.log(res);
			changdiList.value = []
			changdiList.value = res.values
		})
	}


	// 跳转预约 场馆方模式
	const gotoItem = () => {
		let changguanid = changuanxinxi.value.id
		console.log('场馆参数', changguanid);
		uni.navigateTo({
			url: `/pages/booking_view/booking_view?id=${changguanid}`
		});
	}


	// 跳转vip注册
	const gotoVipCard = (changguanId) => {
		uni.navigateTo({
			url: `/views/registeredVipView/registeredVipView?changdiId=${changguanId}`
		})
	}

	// 跳转详情页面
	const gotoXiangqingView = (id, title) => {
		uni.navigateTo({
			url: `/pages/changdi_view/xiangqing_view/xiangqing_view?id=${id}&title=${title}`
		})
	}

	// 跳转组队页面
	const gotoZuduiView = () => {
		let id = changuanxinxi.value.id
		console.log('场官方id',id);
		uni.navigateTo({
			url: `/pages/changdi_view/big-zudui-view?id=${id}`
		})
	}
	
	// 跳转邀约
	const gotoYaoYue = () => {
		let id = changuanxinxi.value.id
		uni.navigateTo({
			url:`/pages/changdi_view/yaoyue-model/yaoyue-dating-view?changdiid=${id}`
		})
	}


	const ChangGuanData = ref({})
	// 获取2天之后的时间
	const get3DayTime = () => {
		// 获取当前日期
		let currentDate = new Date();
		// 计算三天后的日期
		let futureDate = new Date(currentDate.getTime() + 2 * 24 * 60 * 60 * 1000);
		// 格式化为 YYYY-MM-DD
		let year = futureDate.getFullYear();
		let month = String(futureDate.getMonth() + 1).padStart(2, '0');
		let day = String(futureDate.getDate()).padStart(2, '0');

		return `${year}-${month}-${day}`;

	}

	// 获取当前日期并格式化为 YYYY-MM-DD
	const getTdayTime = () => {
		// 使用 let 保存当前日期
		let currentDate = new Date();
		// 格式化为 YYYY-MM-DD
		let year = currentDate.getFullYear();
		let month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
		let day = String(currentDate.getDate()).padStart(2, '0'); // 日期前补零
		return `${year}-${month}-${day}`;

	}

	onLoad((option) => {
		ChangGuanData.value = decodeURIComponent(option.data);
		id.value = option.id
		_getuseropenid(option.id)
		date.value = getTdayTime()

		uni.showLoading({
			title: '加载中'
		});
	})
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f5f5f5;
		min-height: 100vh;

		.gonggao {
			margin: 0;
			padding: 0;

			.item {
				padding-bottom: 0;
				margin-bottom: 0;
			}
		}

		.top-box {
			z-index: -1;

			.swiper {
				height: 400rpx;
				width: 100vw;

				.top-backimg {
					display: block;
					width: 100vw;
					height: 400rpx;
				}
			}


			background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 1) 93%);
		}

		.content-box {
			z-index: 100;
			padding: 0 30rpx 30rpx 30rpx;
			width: calc(100vw - 60rpx);

			.shangjia-box {
				background-color: white;
				/* 左上角圆角 */
				border-radius: 30rpx;
				padding: 30rpx;
				background-color: #ffffff;

				.title {
					font-size: 38rpx;
					font-weight: 700;
				}

				.message-box {
					margin-top: 30rpx;
					font-size: 30rpx;
					font-weight: 200;
				}

				.xiangqing-box {
					margin-top: 30rpx;
					font-size: 30rpx;
					font-weight: 200;
					display: flex;
					justify-content: space-between;
				}

				.dizhi-box {
					margin-top: 30rpx;
					padding-top: 30rpx;
					border-top: 1rpx solid gainsboro;
					font-size: 30rpx;
					font-weight: 200;
					display: flex;
					justify-content: space-between;
				}

				.warring {
					font-size: 24rpx;
					font-weight: 200;
				}
			}

			.ditu-content {
				margin-top: 30rpx;
				background-color: white;
				/* 左上角圆角 */
				border-radius: 30rpx;
				padding: 30rpx;
				background-color: #ffffff;
				margin-bttom: 30rpx;

				.img-box {
					.img {
						border-radius: 30rpx;
					}
				}
			}

			.zudui-box {
				margin-top: 20rpx;
				font-weight: 400;

				.changguan-box {
					background-color: white;
					padding: 20rpx;
					text-align: center;
					margin-bottom: 20rpx;
				}

				.yaoyue {
					background-color: white;
					padding: 20rpx;
					display: flex;
					justify-content: space-between;
				}
			}

			.changdi-content {
				margin-top: 30rpx;
				background-color: white;
				border-radius: 30rpx;
				padding: 30rpx;
				background-color: #ffffff;

				.changdi-box {

					.check-title-box {
						display: flex;

						.btn {
							font-size: 34rpx;
							color: #5b72f2;
							font-weight: 600;
						}
					}


					.btn-box {
						margin-top: 20rpx;
						padding: 40rpx;
						text-align: center;
						background-color: #5b72f2;
						color: white;
						border-radius: 20rpx;
					}
				}
			}
		}
	}
</style>